<template>
  <div class="" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <div class="container-fluid mt-4">
      <div class="card">
        <div class="card-body">
          <span>选择店铺：</span>
          <el-select v-model="value" placeholder="请选择店铺">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="container-fluid mt-3">
      <div class="card">
        <div class="card-body form-inline">

          <div class="col-12 p-0">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 账号概况</p>
          </div>

          <div class="container-fluid">
            <div class="row-fluid form-inline">
              <div class="card col-4 border-0">
                <div class="card-body rounded " style="background: #F4F4F4">
                  <span>门店总金额(元)</span><br>
                  <span class="h1">0</span>
                </div>
              </div>
              <div class="card col-4 border-0">
                <div class="card-body rounded " style="background: #F4F4F4">
                  <span>待结算金额(元)</span><br>
                  <span class="h1">0</span>
                </div>
              </div>
              <div class="card col-4 border-0">
                <div class="card-body rounded " style="background: #F4F4F4">
                  <span>累计收入(元)</span><br>
                  <span class="h1">0</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="container-fluid mt-4">
      <div class="card">
        <div class="card-body form-inline">
          <div class="col-12 p-0">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0 " style="color: blue"></i> 交易概况</p>
          </div>
          <div class="col-6" style="width:50%;height: 300px" id="table1"></div>
          <div class="col-6" style="width:50%;height: 300px" id="table2"> </div>

          <div class="col-12 p-0 offset-1">
            <span class="badge mr-1" style="background: #5470C6">&emsp;&emsp;&emsp;</span><span class="mr-1">总金额</span>
            <span class="badge mr-1" style="background: green ">&emsp;&emsp;&emsp;</span><span>订单数</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
        name: "FianceAssetOverView",
      data() {
        return {
          options: [{
            value: '1',
            label: '店铺1'
          }],
          value: '',
        }
      },
      mounted() {
        this.drawLine()
        this.drawLine2()
      },
      methods: {
        drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('table1'))
          // 绘制图表
          myChart.setOption({
            xAxis: {
              type: 'category',
              data: ['A', 'B', 'C','D','E','F']
            },
            color:["#5470C6"],
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [120, 200, 150,400,100,1000],
                type: 'line'
              }
            ]
          });
        },
        drawLine2(){
          // 基于准备好的dom，初始化echarts实例
          let myCharts = this.$echarts.init(document.getElementById('table2'))
          // 绘制图表
          myCharts.setOption({
            xAxis: {
              type: 'category',
              data: ['A', 'B', 'C','D','E','F']
            },
            color:["green"],
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [120, 200, 150,400,100,1000],
                type: 'line'
              }
            ]
          });
        }
      }
    }
</script>

<style scoped>

</style>
